<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度音乐全选框</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <section id="wrap">
        <h2 class="title">百度音乐榜单</h2>
        <ul id="list">
          <li>
            <input type="checkbox" />
            <span>第一条信息</span>
            <a href="javascript:;" class="collect">收藏</a>
            <a href="javascript:;" class="cancelCollect">取消收藏</a>
            <a href="javascript:;" class="remove">删除</a>
          </li>
        </ul>
        <footer class="footer">
          <label><input type="checkbox" id="checkAll" />全选/全不选</label>
        </footer>
    </section>
</body>
</html>
<script>
    var data = [
        {
            id: 0,
            title: "残酷月光 - 费启鸣",
            checked: true,
            collect: true
        }, 
        {
            id: 1,
            title: "兄弟 - 艾热",
            checked: false,
            collect: true
        }, 
        {
            id: 2,
            title: "毕生 - 夏增祥",
            checked: true,
            collect: true
        }, 
        {
            id: 3,
            title: "公子向北去 - 李春花",
            checked: false,
            collect: false
        }, 
        {
            id: 4,
            title: "战场 - 沙漠五子",
            checked: false,
            collect: false //是否收藏 true 收藏 false 没有收藏
        }
    ];

    // 把数据渲染在视图上
    function renderDom(data){
        let ulEle = document.querySelector('#list');
        ulEle.innerHTML=``;
        data.forEach(function(item,key){
            let liEle = document.createElement("li");
            liEle.innerHTML =  `<input type="checkbox" ${item.checked ? 'checked' : ''}  />
                                <span>${item.title}</span>
                                ${item.collect ? '<a href="javascript:;" class="cancelCollect">取消收藏</a>' : '<a href="javascript:;" class="collect">收藏</a>'}
                                <a href="javascript:;" class="remove">删除</a>`;
            ulEle.appendChild(liEle);

            // 添加点击事件
            liEle.onclick = function(e){
                // 收藏
                if(e.target.classList.contains("collect")){
                    console.log('点击了收藏');
                    data[key].collect = true;
                    console.log(data);
                    // 重新渲染视图
                    renderDom(data);
                }
                // 取消收藏
                if(e.target.classList.contains("cancelCollect")){
                    console.log('点击了取消收藏');
                    data[key].collect = false;
                    console.log(data);
                    // 重新渲染视图
                    renderDom(data);
                }

                // 删除
                if(e.target.classList.contains("remove")){
                    data.splice(key,1);
                    console.log(data);
                    renderDom(data);
                }

                // 点击checkbox
                // 获取节点的标签名称 大写的
                console.log(e.target.nodeName);
                if(e.target.nodeName.toLowerCase()==="input"){
                    console.log(e.target.checked);
                    data[key].checked = e.target.checked;
                    console.log(data);
                    var res = isCheckall();
                    document.querySelector("#checkAll").checked = res;
                }
            }
        })
    }
    renderDom(data);

    // 全选
    document.querySelector("#checkAll").onclick = function(){
        var that = this;
        data.forEach(function(item){
            item.checked = that.checked;
        })
        console.log(data);
        renderDom(data);
    }
    // 判断是否需要全选或全不选
    function isCheckall(){
        return data.every(function(item){
            return item.checked;
        })
    }
</script>